<script lang="ts" setup>
	import { Pagination, Autoplay } from 'swiper/modules';

  interface IProps {
    picDatas: string[]; // 图片数据
  }

  const swiperPagination = {
    clickable: true
  };

	const modules = [
		Pagination,
		Autoplay,
	];

  const props = withDefaults(defineProps<IProps>(), {
    picDatas: () => [],
  });

</script>

<template>
  <div class="swiper-wrap">
		<swiper
			:modules="modules"
			:pagination="swiperPagination"
			isDuplicate
			loop
			:autoplay="{ delay: 2000 }"
			isPrev
			isNext
		>
			<swiper-slide
			  v-for="(item, index) of props.picDatas"
			  :pic="item"
			  :key="index"
			>
			  <img class="swiper-img" v-lazy="item" />
			</swiper-slide>
		</swiper>
	</div>
</template>

<style lang="scss">
  @import "../../assets/styles/variables.scss";

  .swiper-wrap .swiper .swiper-pagination .swiper-pagination-bullet-active {
  	background-color: $defaultGreen;
  }
  
	.swiper-slide {
		height: 2rem;
	}

	.swiper-img {
		width: 100%;
		height: 100%;
	}
</style>
